.enable_inbox() when (@enable-inbox = true) {

  .inbox-tabs.nav-tabs {
    > li {
      > a {
        background-color: #FAFAFA;
      }
      &.active:not(.open) > a {
        &, &:hover, &:focus {
          background-color: #F1F5FA;
          box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.1);
          color: #48768E;
        }
      }

      > a.btn-new-mail {
        background-color: transparent;
        border: none !important;
        padding: 0 !important;
        > .btn {
          border-width: 0 !important;
          border-radius: 3px !important;

          padding: 0 6px !important;

          position: relative;

          transition: none !important;
        }
      }
      &.active > a.btn-new-mail {
        box-shadow: none !important;

        > .btn:before {
          content: "";
          display: block;
          position: absolute;

          top: 100%;
          left: 50%;
          margin-left: -6px;

          border-width: 6px 8px;

          border-style: solid;
          border-color: transparent;
          border-top-color: inherit;
        }
      }

    }

    &.tab-size-bigger > li {
      > a {
        padding: 5px 15px 7px;
        font-size: @font-size-inbox-tab-large;
        > .@{icon}:first-child {
          margin-bottom: 5px;
        }

        &.btn-new-mail > .btn {
          padding: 10px !important;
          border-radius: 7px !important;
        }
      }

      &.active > a.btn-new-mail {
        margin-top: 0 !important;
        top: 1px;
      }
      &.active > a.btn-new-mail > .btn:before {
        left: 50%;
        margin-left: -8px;

        border-width: 8px 10px;
      }
    }

  }

  @media only screen and (max-width: @screen-tiny-max) {
    //475px
    .inbox-tabs > .li-new-mail {
      display: block;
      text-align: right;
      margin-bottom: 8px !important;
      float: none !important;
    }

    .inbox-tabs > .li-new-mail > .btn-new-mail {
      display: inline-block;
      width: auto;
    }
  }

  .message-container {
    position: relative;
  }
  .message-list {
    position: relative;
  }
  .message-item {
    border: 1px solid #EAEDF1;
    border-bottom-width: 0;
    padding: 12px 12px 14px;
    line-height: 18px;

    position: relative;
    background-color: #FFF;

    &:first-child {
      border-top-width: 0;
    }

    &:hover {
      border-color: #E2EAF2;
      background-color: #F2F6F9;

      + .message-item {
        border-top-color: #E2EAF2;

        &.selected {
          border-top-color: #FFF;
        }
      }
    }

    &.selected {
      background-color: #EFF4F7;
      border-color: #FFF #E2EAF2;

      + .message-item {
        border-top-color: #FFF;

        &:hover + .message-item {
          border-top-color: #FFF;
        }
      }
    }
  }

  .message-navbar, .message-item {
    input.ace + .lbl::before {
      top: auto;
    }
  }

  .message-item {
    .sender {
      margin: 0 6px 0 4px;
      vertical-align: middle;
      color: #467287;

      display: inline-block;
      width: 110px;
      height: 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;

      cursor: pointer;
    }
    &.message-unread .sender {
      color: #6A9CBA;
      font-weight: bold;
    }

    .summary {
      vertical-align: middle;
      display: inline-block;
      position: relative;

      margin-left: 30px;

      max-width: 250px;
      max-width: ~"calc(100% - 300px)";
      min-width: 200px;
      white-space: nowrap;

      .text {
        color: #555;
        vertical-align: middle;
        display: inline-block;

        width: auto;
        max-width: 100%;
        height: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }

      .message-flags {
        display: block;
        position: absolute;

        right: 100%;
        margin-right: 4px;

        height: 18px;
        white-space: nowrap;
      }

    }
    &.message-unread .summary .text {
      color: #609FC4;
      font-weight: bold;
    }

    .time {
      float: right;
      width: 60px;
      height: 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #666;
    }
    &.message-unread .time {
      font-weight: bold;
      color: #609FC4;
    }
    &.message-unread .message-content .time {
      font-weight: normal;
    }

    .attachment {
      color: #999;
      font-size: @font-size-inbox-attachment-icon;
      vertical-align: middle;
      float: right;
      margin: 0 12px;
      position: relative;
    }
    &.message-unread .attachment {
      color: #4F99C6;
    }
  }
  .message-content .time {
    font-weight: normal;
  }

  .message-star {
    vertical-align: middle;
    margin: 2px 4px 0 6px;
    font-size: @font-size-inbox-start-icon;
    cursor: pointer;

    &:hover {
      color: @ace-orange2 !important;
      text-decoration: none;
    }
  }

  .mail-tag:empty {
    display: inline-block;
    width: 8px;
    height: 11px;
    padding: 0;
    line-height: normal;
    vertical-align: middle;
    margin: 0 1px 0 0;
  }
  .badge.mail-tag {
    border-radius: 2px;
  }
  .dropdown-menu > li > a > .mail-tag {
    vertical-align: inherit;
  }

  @media only screen and (max-width: @screen-sm-max) {
    .message-item .summary {
      min-width: 0;
    }

    .message-item .sender {
      width: 100px;
    }
  }

  @media only screen and (max-width: 550px) {
    .message-item .summary {
      margin: 8px 0 0 32px;
      max-width: 95%;
      min-width: 0;

      display: block;
    }

    .message-item .sender {
      width: auto;
      max-width: 150px;
    }

    .message-item .summary .text {
      max-width: 95%;
    }
  }

  .btn-message, .btn-message:hover, .btn-message:focus, .btn-message:active, .open .btn-message.dropdown-toggle {
    background-color: #FFF !important;
    border: 1px solid #94B9CE !important;
    color: #7CA3BA !important;
    text-shadow: none !important;
  }

  .message-content {
    padding: 16px 12px;
    border: 1px solid #E9E9E9;
    .box-shadow(~"0 0 1px 1px rgba(0,0,0,0.02)");
    background-color: rgba(255, 255, 255, 0.8);
    border-top-width: 0;

    .message-item & {
      margin-top: 16px;
      border-top-width: 1px;
    }
  }
  .message-body {
    padding: 0 9px;
    color: #6A7177;
  }

  .message-navbar {
    line-height: 24px;
    padding: 10px 12px;
    border: 1px solid #D6E1EA;
    border-color: #D6E1EA transparent;

    background-color: #F1F5FA;
    text-align: center;

    position: relative;
  }

  .message-navbar, .message-content {
    .dropdown-toggle {
      color: #777;
      &:hover, &:focus {
        text-decoration: none;
        color: #2283C5;
      }
    }
  }

  .message-bar {
    display: inline-block;
    min-height: 28px;
  }

  @media only screen and (max-width: @screen-xs) {
    .message-bar {
      display: block;
      min-height: 60px;
    }
  }

  .message-footer {
    background-color: #F1F1F1;
    padding: 12px 16px;
    border: 1px solid #E6E6E6;
    border-width: 1px 0;
    border-top: 1px solid #E4E9EE;

    .pagination {
      margin: 0;
      > li {
        margin: 0;
        padding: 0;

        > a, > span {
          color: #777;
          padding: 3px 6px;

          margin-left: 1px;
          margin-right: 1px;

          background-color: transparent;
          border: 1px solid transparent;
        }
        &.disabled > span {
          color: #BBBBBB;
          cursor: default;
          background-color: transparent;
          border-color: transparent;
        }

        > a:hover {
          border-color: lighten(desaturate(#2283C5, 25%), 25%);
          color: #2283C5;
          text-decoration: none;
          background-color: #FFF;
        }
      }
    }

    input[type=text] {
      font-size: @baseFontSize - 1;

      width: 34px;
      height: 24px;
      line-height: 20px;

      margin-bottom: 0;

      padding: 3px;
      vertical-align: middle;
      text-align: center;
    }

  }

  .message-footer-style2 .pagination > li {
    > a, > span {
      border: 1px solid #B5B5B5;
      border-radius: 100% !important;
      width: 26px;
      height: 26px;
      line-height: 26px;

      display: inline-block;
      text-align: center;
      padding: 0;
    }
    > span, &.disabled > span {
      border-color: #CCC;
    }

    > a:hover {
      border-color: #84AFC9;
      background-color: #F7F7F7;
    }
  }

  .message-item.message-inline-open {
    background-color: #F2F6F9;
    border: 1px solid #DDD;
    border-bottom-color: #CCC;

    &:first-child {
      border-top-color: #EEE;
    }
    &:last-child {
      border-bottom-color: #DDD;
    }
    + .message-item {
      border-bottom-color: transparent;
    }
  }

  .message-loading-overlay {
    position: absolute;
    z-index: 14;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;

    > .@{icon} {
      position: absolute;
      top: 15%;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

  .message-content {
    .sender {
      color: #6A9CBA;
      font-weight: bold;
      width: auto;
      text-overflow: inherit;
      vertical-align: middle;
      margin: 0;
    }
    .time {
      width: auto;
      text-overflow: inherit;
      white-space: normal;
      float: none;
      vertical-align: middle;
    }

  }

  ul.attachment-list {
    margin: 6px 0 4px 8px;
    > li {
      margin-bottom: 3px;
    }
  }
  .message-attachment {
    padding-left: 10px;
    padding-right: 10px;
  }

  .attached-file {
    color: #777;
    width: 200px;
    display: inline-block;

    > .@{icon} {
      display: inline-block;
      width: 16px;
      margin-right: 2px;
      vertical-align: middle;
    }

    &:hover {
      text-decoration: none;
      color: #438EB9;

      .attached-name {
        color: #2283C5;
      }
    }
    .attached-name {
      display: inline-block;
      max-width: 175px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: middle;
    }

  }

  .messagebar-item-left, .messagebar-item-right {
    position: absolute;
    bottom: 14px;
    left: 12px;
    text-align: left;
  }
  .messagebar-item-right {
    right: 12px;
    left: auto;
  }
  .message-navbar .nav-search {
    right: auto;
    left: 5px;
    top: auto;
    bottom: 11px;
  }
  .message-navbar .messagebar-item-left ~ .nav-search {
    left: 60px;
  }

  .message-form {
    border: 1px solid #ddd;
    border-top: none;
    padding-top: 22px;
  }

  @media only screen and (max-width: @screen-xs) {
    .message-form {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  .message-form {
    .form-actions {
      margin-bottom: 0;
    }

    .wysiwyg-editor {
      overflow: auto;
      min-height: 150px;
      max-height: 250px;
      height: auto;
    }
  }

  .btn-send-message {
    position: relative;
    top: 6px;
    vertical-align: middle;

  }

  .btn-back-message-list {
    color: #777;
    &:hover {
      color: #478FCA;
      text-decoration: none;
    }
  }

  .message-condensed {
    .message-item {
      padding-top: 8px;
      padding-bottom: 9px;
    }
    .message-navbar, .message-footer {
      padding-top: 7px;
      padding-bottom: 7px;
    }

    .messagebar-item-left, .messagebar-item-right {
      bottom: 9px;
    }
    .message-navbar .nav-search {
      bottom: 7px;
    }
  }

  @media only screen and (max-width: @screen-xs) {
    .message-condensed .message-bar {
      min-height: 42px;
    }
  }

  .enable_inbox_tabless() when (@enable-inbox-tabless = true) {
    //alternative to tabs
    .inbox-folders .btn-block {
      margin-top: 0;
    }
    @media only screen and (max-width: @screen-xs-max) {
      .inbox-folders.inbox-folders-responsive .btn-block {
        width: 24%;
      }
    }
    @media only screen and (max-width: 600px) {
      .inbox-folders.inbox-folders-responsive .btn-block {
        width: 48%;
      }
    }
    @media only screen and (max-width: @screen-tiny) {
      .inbox-folders.inbox-folders-responsive .btn-block {
        width: 99%;
      }
    }

    .inbox-folders .btn-lighter, .inbox-folders .btn-lighter.active {
      background-color: #F4F4F4 !important;
      text-shadow: none !important;
      color: #7C8395 !important;
      border: 1px solid #FFF !important;
      padding: 5px 11px;
    }
    .inbox-folders .btn-lighter.active {
      background-color: #EDF2F8 !important;
      color: #53617C !important;
    }

    .inbox-folders .btn-lighter:hover {
      background-color: #EFEFEF !important;
      color: #6092C4 !important;
    }
    .inbox-folders .btn > .@{icon}:first-child {
      display: inline-block;
      width: 14px;
      text-align: left;
    }

    .inbox-folders .btn-lighter + .btn-lighter {
      border-top-width: 0 !important;
    }

    .inbox-folders .btn.active:before {
      display: block;
      content: "";
      position: absolute;
      top: 1px;
      bottom: 1px;
      left: -1px;
      border-left: 3px solid #4F99C6;
    }
    .inbox-folders .btn.active:after {
      display: none;
    }

    .inbox-folders .btn .counter {
      border-radius: 3px;
      position: absolute;
      right: 8px;
      top: 8px;
      padding-left: 6px;
      padding-right: 6px;
      .opacity(0.75);
    }
    .inbox-folders .btn:hover .badge {
      .opacity(1);
    }

  }
  .enable_inbox_tabless();

}

.enable_inbox();